<template>
  <q-layout view="lHh Lpr lFf">
    <!-- 左侧抽屉式菜单 -->
    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      :width="260"
      class="bg-white text-grey-9"
      :breakpoint="768"
    >
      <q-scroll-area class="fit">
        <q-list padding class="menu-list">
          <!-- 应用标题 -->
          <q-item class="app-title q-pa-md">
            <q-item-section>
              <div class="text-h5 text-weight-bold text-primary">管理系统</div>
              <div class="text-caption text-grey-6">v2.0.0</div>
            </q-item-section>
          </q-item>

          <q-separator class="q-my-sm" />

          <!-- 递归渲染菜单项 -->
          <MenuItem v-for="(item, index) in menuItems" :key="index" :item="item" :level="0" />
        </q-list>
      </q-scroll-area>

      <!-- 底部用户信息 -->
      <div class="user-info q-pa-sm bg-grey-2 text-center">
        <q-avatar size="36px" class="q-mb-xs">
          <img src="profile.svg" />
        </q-avatar>
        <div class="text-weight-medium">管理员</div>
        <div class="text-caption text-grey-7">超级管理员</div>
      </div>
    </q-drawer>

    <!-- 顶部导航栏 -->
    <Navbar @toggle-drawer="leftDrawerOpen = !leftDrawerOpen" />

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
import Navbar from './components/Navbar'
import MenuItem from './components/MenuItem.vue'

const leftDrawerOpen = ref(false)

const menuItems = [
  {
    icon: 'home',
    label: '首页',
    to: '/dashboard',
  },
  {
    icon: 'settings',
    label: '系统管理',
    defaultOpened: true,
    children: [
      { icon: 'person', label: '用户管理', to: '/system/user' },
      { icon: 'groups', label: '角色管理', to: '/system/role' },
      { icon: 'menu', label: '菜单管理', to: '/system/menu' },
      { icon: 'account_tree', label: '部门管理', to: '/system/dept' },
      { icon: 'work_outline', label: '岗位管理', to: '/system/post' },
      { icon: 'bookmarks', label: '字典管理', to: '/system/dict' },
      { icon: 'tune', label: '配置管理', to: '/system/config' },
      { icon: 'attach_file', label: '附件管理', to: '/system/attachment' },
      { icon: 'campaign', label: '公告管理', to: '/system/notice' },
      {
        icon: 'description',
        label: '日志管理',
        defaultOpened: true,
        children: [
          { icon: 'history_toggle_off', label: '操作日志', to: '/system/monitor/operlog' },
          { icon: 'login', label: '登录日志', to: '/system/monitor/loginlog' },
        ],
      },
      { icon: 'verified_user', label: '白名单管理', to: '/system/whitelist' },
    ],
  },
]
</script>

<style lang="scss">
.q-drawer {
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);

  .app-title {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .menu-list {
    .q-item {
      border-radius: 8px;
      margin: 4px 8px;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      min-height: 44px;

      &:hover {
        background-color: rgba(var(--q-primary-rgb), 0.08);
      }

      &.active-menu-item {
        color: var(--q-primary) !important;
        background-color: rgba(var(--q-primary-rgb), 0.12) !important;
        font-weight: 600;

        .q-icon {
          color: var(--q-primary) !important;
        }
      }

      .q-item__section--avatar {
        min-width: 36px;
      }

      .q-icon {
        font-size: 1.2rem;
      }
    }

    .q-expansion-item {
      &--expanded {
        > .q-item {
          color: var(--q-primary);
          font-weight: 600;
        }
      }

      &__content {
        padding-left: 12px;

        .q-item {
          min-height: 36px;
          padding-left: 44px;
          margin-left: 0;
          font-size: 0.9rem;

          &:before {
            content: '';
            position: absolute;
            left: 24px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: currentColor;
            opacity: 0.6;
          }

          &.active-menu-item {
            &:before {
              background-color: var(--q-primary);
              opacity: 1;
            }
          }
        }

        .q-expansion-item__content {
          .q-item {
            padding-left: 60px;

            &:before {
              left: 40px;
            }
          }
        }
      }
    }
  }

  .user-info {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px;
  }
}
</style>
